<template>
	<view class="bottom-menu">
		<view class="select-tips">
			{{tipTxt}}
		</view>
		<view class="menu-item" v-for="(item,index) in menus" :key="item.value" @click="itemClick(item)">
			<uni-icons fontFamily="iconfont" style="font-weight: bold;" :size="20" color="#444">{{item.icon}}</uni-icons>
			<view class="menu-title">
				{{item.title}}
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		name: "bottom-menu",
		props: {
			menus: {
				type: Array,
				default: () => [{
						icon: "\ue741",
						title: "今日晚些时候",
						value: 1
					},
					{
						icon: "\ue741",
						title: "今日晚些时候",
						value: 2
					},
					{
						icon: "\ue741",
						title: "今日晚些时候",
						value: 3
					},
				]
			},
			tipTxt: {
				type: String,
				default: "排序依据"
			}
		},
		data() {
			return {


			};
		},
		methods: {

			itemClick(option) {
				this.showBox = false
				this.$emit("select", option)
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.bottom-menu {
		height: max-content;
		padding: 24px 12px 12px 12px;
		background-color: #fff;
		border-radius: $uni-border-radius-lg $uni-border-radius-lg 0 0;
		.select-tips{
			margin-bottom: 24upx;
			color: #333;
		}
		.menu-item {
			display: flex;
			align-items: center;
			font-size: 28upx;
			color: #555;

			.menu-title {
				width: max-content;
				margin-left: 36upx;
				padding: 24upx;
				padding-left: 0;
			}
		}
	}
</style>